<template>
  <el-row style="margin-bottom: 20px">
    <el-col :span="12" style="font-size: 30px; font-weight: bold;">我的收藏</el-col>
    <el-col :span="12" style="text-align: right">
      <RouterLink to="/user/index">
        <el-button type="success" size="large">添加收藏</el-button>
      </RouterLink>
    </el-col>
  </el-row>
  <div>
    <ul>
      <li v-for="(collect,index) in pageInfo.list" :key="index" class="collectList">
        <el-row>
          <el-col :span="2">
            <el-image
                :src="server + '/goods/pic/' +collect.goods.picList[0].url"
                style="width: 50px;height: 50px"
                fit="contain"/>
          </el-col>
          <el-col :span="4">{{ collect.goods.name }}</el-col>
          <el-col :span="4">{{ collect.goods.dscp }}</el-col>
          <el-col :span="2">{{ collect.goods.color }}</el-col>
          <el-col :span="3">{{ collect.goods.price }}RMB</el-col>
          <el-col :span="2">{{ collect.goods.count }}个</el-col>
          <el-rate
              v-model="collect.goods.score"
              size="small"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}分"
          />
          <el-button style="margin-right: 3px" @click="cancelCollect(collect.id)">取消收藏</el-button>
        </el-row>
      </li>
    </ul>
  </div>
  <el-row class="row-bg" justify="center">
    <el-pagination background layout="prev, pager, next"
                   v-model:current-page="pageInfo.pageNum"
                   :page-count="pageInfo.pages"
                   @update:current-page="selectByPage"
                   style="margin-top: 50px;"/>
  </el-row>
</template>

<script setup>
//获取当前用户的所有收藏
import collectApi from "@/api/collectApi.js";
import {ref} from "vue";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";

const server = ref(import.meta.env.VITE_SERVER_ADDR)
const collectList = ref({})
//搜索条件
const condition = ref({
  name: null,
});
//分页信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0,
})

//取消收藏
function cancelCollect(id) {
  collectApi.delete(id)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
          selectByPage()
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

function selectByPage(pageNum) {
  collectApi.selectByPage(condition.value, pageNum, 4)
      .then(resp => {
        //console.log(resp.data)
        //console.log(resp.data.list)
        pageInfo.value = resp.data
        //collectList.value=resp.data.list
      })
}

selectByPage()
</script>

<style scoped>
.collectList {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--theme-color);

}


</style>